<template>
  <div class="application-set">
    <el-dialog
      :title="visible.type===0? '添加应用':'修改应用'"
      :visible.sync="visible.showSetDialog"
      width="600px"
      top="10vh"
      center
      :close-on-click-modal="false"
    >
      <div class="content">
        <div class="line flex-left">
          <label class="title">应用分类</label>
          <el-select v-model="param.app_category_id" placeholder="请选择">
            <el-option
              v-for="item in category"
              :key="item.id"
              :label="item.name['zh-CN']"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <div class="line flex-left">
          <label class="title">应用名称(中)</label>
          <el-input v-model="param['name[zh-CN]']" size="medium" placeholder="请输入应用中文名称（必填）"></el-input>
        </div>
        <div class="line flex-left">
          <label class="title">应用名称(英)</label>
          <el-input v-model="param['name[en-US]']" size="medium" placeholder="请输入应用英文名称（选填）"></el-input>
        </div>
        <div class="line flex-left">
          <label class="title">应用名称(日)</label>
          <el-input v-model="param['name[ja]']" size="medium" placeholder="请输入应用日文名称（选填）"></el-input>
        </div>
        <div class="line flex-left">
          <label class="title">应用宣传语</label>
          <el-input
            class="limit-text"
            v-model="param.slogan"
            size="medium"
            placeholder="请输入应用宣传语"
            type="text"
            :maxlength="50"
            :show-word-limit="true"
          ></el-input>
        </div>
        <div class="line flex-left">
          <label class="title">H5链接</label>
          <el-input v-model="param.app_url" size="medium" placeholder="请输入H5链接"></el-input>
        </div>
        <div class="line flex-left">
          <label class="title">应用排序</label>
          <el-input v-model="param.sort" size="medium" placeholder="请输入应用排序，数字越小越靠前"></el-input>
        </div>
        <div class="line flex-left">
          <label class="title">应用类型</label>
          <div>
            <el-radio v-model="param.type" label="1" v-if="['1','3'].includes(wallet_type)">去中心化应用</el-radio>
            <el-radio v-model="param.type" label="2" v-if="['2','3'].includes(wallet_type)">托管体系应用</el-radio>
            <el-radio v-model="param.type" label="3" v-if="wallet_type==='3'">通用</el-radio>
          </div>
        </div>
        <div class="line flex-left" v-show="param.type==='2'">
          <label class="title">准入条件</label>
          <div>
            <el-checkbox v-model="param.phone" true-label="1" false-label="0">绑定手机</el-checkbox>
            <el-checkbox v-model="param.email" true-label="1" false-label="0">绑定邮箱</el-checkbox>
            <el-checkbox v-model="param.real_name" true-label="1" false-label="0">实名认证</el-checkbox>
          </div>
        </div>
        <div class="line img-upload flex-left">
          <label class="title">图片</label>
          <el-upload
            ref="my-upload"
            :class="{'scaleIMGdisabled':disabledUpload===true}"
            :action="url"
            :data="{type:'application'}"
            :headers="headers"
            list-type="picture-card"
            :on-remove="remove"
            :on-error="error"
            :on-success="success"
            :before-upload="()=>{disabledUpload=true;onUpload=true}"
            :file-list="imgList"
          >
            <i class="el-icon-plus"></i>
            <div slot="tip" class="el-upload__tip">提示：建议图片尺寸156*156，使用深色底，图片大小进行压缩。</div>
          </el-upload>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="visible.showSetDialog = false">取 消</el-button>
        <el-button
          size="small"
          type="primary"
          @click="submit"
          :disabled="onSubmit||onUpload"
          :loading="onSubmit"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addApps, updateApp } from "../../views/Explorer/Explorer.service";
export default {
  props: ["visible", "category", "init"],
  data() {
    return {
      url: "/root/api/oss/upload",
      headers: {
        token: this.$store.state.token
      },
      param: {
        "name[zh-CN]": "",
        "name[en-US]": "",
        "name[ja]": "",
        sort: "",
        app_url: "",
        icon: "",
        app_category_id: "",
        slogan: "",
        type: process.env.VUE_APP_TRS_CENTER,
        status: 1,
        email: "0",
        phone: "0",
        real_name: "0"
      },
      imgList: [],
      disabledUpload: false,
      onSubmit: false,
      onUpload: false
    };
  },
  computed: {
    wallet_type() {
      return process.env.VUE_APP_TRS_CENTER;
    }
  },
  watch: {
    visible: {
      handler(item) {
        // this.param.app_category_id = this.category[0].id;
        if (item.type === 1) {
          this.disabledUpload = true;
          if (this.imgList.length === 0)
            this.imgList = [{ url: item.data.icon }];

          let { name, ...data } = item.data;
          let names = {
            "name[zh-CN]": item.data.name["zh-CN"],
            "name[en-US]": item.data.name["en-US"],
            "name[ja]": item.data.name["ja"]
          };
          this.param = Object.assign(names, data);
        }
        if (item.showSetDialog === false) {
          this.param = {
            "name[zh-CN]": "",
            "name[en-US]": "",
            "name[ja]": "",
            sort: "",
            app_url: "",
            icon: "",
            app_category_id: this.param.app_category_id,
            slogan: "",
            type: "1",
            status: 1,
            email: "0",
            phone: "0",
            real_name: "0"
          };
          this.disabledUpload = false;
          this.imgList = [];
        }
      },
      deep: true
    },
    init() {
      this.param.app_category_id = this.init;
    }
  },
  methods: {
    async submit() {
      console.log(this.param);
      if (this.param["name[zh-CN]"] === "") {
        this.$message.error("应用中文名称不能为空");
        return;
      }
      if (this.param.app_url === "") {
        this.$message.error("应用H5链接不能为空");
        return;
      }
      if (this.param.sort === "") {
        this.$message.error("应用排序不能为空");
        return;
      }
      if (this.onSubmit === true || this.onUpload === true) return;
      this.onSubmit = true;
      const res =
        this.visible.type === 0
          ? await addApps(this.param)
          : await updateApp(this.param);
      if (res.code === 0) {
        this.$emit("success");
      }
      this.onSubmit = false;
    },
    remove() {
      this.param.icon = "";
      this.disabledUpload = false;
    },
    error() {
      this.disabledUpload = false;
      this.onUpload = false;
      this.$notify.error({
        title: "提示",
        message: this.visible.type === 0 ? "图片上传失败！" : "图片修改失败！",
        duration: 1500
      });
    },
    success(res) {
      this.param.icon = res.data || "";
      this.onUpload = false;
      this.$notify.success({
        title: "提示",
        message: this.visible.type === 0 ? "图片上传成功" : "图片修改成功",
        duration: 1500
      });
    }
  }
};
</script>

<style lang="scss">
.application-set {
  .el-dialog__header {
    border-bottom: 1px solid #e9e9e9;
    padding: 15px;
    font-weight: 600;
  }
  .content {
    .limit-text input {
      padding-right: 60px;
    }
    .line {
      line-height: 50px;
      .title {
        width: 6em;
        text-align: right;
        margin-right: 20px;
        flex-shrink: 0;
      }
    }
    .el-upload__tip {
      line-height: 20px;
      color: #d93a49;
    }
  }
  .scaleIMGdisabled {
    .el-upload--picture-card {
      display: none;
    }
  }
}
</style>